<template>
  <div class="container">
    <!--      题目属性-->
    <div class="container-property">
      <div class="container-property-time"></div>
      <div class="container-property-text">题目属性</div>
    </div>
    <!--    end-->
    <div class="container-form">
      <el-form :model="$store.state.exam.exam.dan" :rules="rules" ref="ruleForm" label-width="120px"
               class="demo-ruleForm">
        <div style="display: flex">
          <div>
            <el-form-item label="题目分数" prop="score">
              <el-input-number :min="0.5" :step="0.5" :max="100" clearable
                               v-model="$store.state.exam.exam.dan.score"></el-input-number>
            </el-form-item>
          </div>
          <div style="margin-left: 20px">
            <el-form-item label="题目显示名称" prop="show_type">
              <el-input clearable v-model="$store.state.exam.exam.dan.show_type"></el-input>
            </el-form-item>
          </div>
        </div>
        <div style="display: flex">
          <div>
            <el-form-item label="题目类型" prop="pattern">
              <el-radio v-model="$store.state.exam.exam.dan.pattern" label="作业">阶段测评</el-radio>
              <el-radio v-model="$store.state.exam.exam.dan.pattern" label="考试">综合测评</el-radio>
            </el-form-item>
          </div>
          <div style="margin-left: 20px">
            <el-form-item label="试卷/作业名称" prop="paper_name">
              <el-input clearable v-model="$store.state.exam.exam.dan.paper_name"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <!--      题目属性-->
    <div class="container-property">
      <div class="container-property-time"></div>
      <div class="container-property-text">题目（题干内容）</div>
    </div>
    <!--    end-->

    <div class="container-title" id="edite">
      <div  style="border: 1px solid #ccc;z-index: 9999">
        <!-- 工具栏 -->
        <Toolbar
          v-if="isEditer"
          style="border-bottom: 1px solid #ccc"
          :editorId="editorId"
          :defaultConfig="toolbarConfig"
        />
        <!-- 编辑器 -->
        <Editor
          v-if="isEditer"
          style="height: 200px;"
          :editorId="editorId"
          :defaultConfig="editorConfig"
          @onChange="onChange"
          :defaultHtml="defaultHtml"
        />
      </div>
    </div>


    <!--      题目属性-->
    <div class="container-property" style="margin-top: 20px;width: 500px">
      <div style="display: flex;align-items: center">
        <div class="container-property-time"></div>
        <div class="container-property-text">选项（从选项中选择一个作为答案）</div>
      </div>
      <div>
        <el-button v-if="isPush" @click="pushItem" type="primary" icon="el-icon-circle-plus" circle></el-button>
      </div>
    </div>
    <!--    end-->


    <!--    选项-->
    <div style="margin-left: 50px" v-for="(item,index) in select" :key="index">
      <div class="container-select">
        <div class="container-select-item">{{ item }}</div>
        <div style="margin-left: 20px;width: 120px;display: flex;align-items: center">
          <div>
            <el-radio v-model="$store.state.exam.exam.dan.answer" :label="item">答案</el-radio>
          </div>
          <div>
            <el-button style="margin-left: 88px" @click="delItem" type="danger" icon="el-icon-delete"
                       circle></el-button>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div>
          <el-input
            type="textarea"
            autosize
            clearable
            placeholder="请输入内容"
            v-model="$store.state.exam.exam.dan[item]">
          </el-input>
        </div>
      </div>
    </div>
    <!--    end-->

    <!--    保存按钮-->
    <div class="container-button">
      <el-row>
        <el-button v-if="$store.state.exam.edit.type == 0 && $store.state.exam.edit.name == ''  " @click="onSubmit"
                   type="primary" round>
          保存/继续添加
        </el-button>
        <el-button v-if="$store.state.exam.edit.type == 0 && $store.state.exam.edit.name != '' " @click="onSubmit"
                   type="primary" round>
          更新/关闭
        </el-button>
        <el-button v-if="$store.state.exam.edit.type == 1 " @click="onSubmit"
                   type="primary" round>
          保存/返回
        </el-button>
        <el-button @click="onClose" type="info" round>{{
            $store.state.exam.edit.type == 0 ? '取消/关闭' : '取消/返回'
          }}
        </el-button>
      </el-row>
    </div>
    <!--    end-->

  </div>
</template>

<script>
let _this;
export default {
  data() {
    return {
      isEditer:false,
      editer: null,
      isPush: true,
      select: ['A', 'B', 'C', 'D'],
      editorId: 'wangEditor-1', // 定义一个编辑器 id ，要求：全局唯一且不变。重要！！！
      latestContent: '', // 用于存储编辑器最新的内容，onChange 时修改
      toolbarConfig: {},
      defaultHtml: '',//内容
      editorConfig: {
        MENU_CONF: {//图片上传配置
          uploadImage: {
            fieldName: 'file',
            server: 'http://www.free.com/api/Upload/upload'
          }
        },
        placeholder: '请输入内容...',
      },
      ruleForm: {
        title: '',
        score: '2',
        pattern: '',
        paper_name: '',
        show_type: '单选题',
        type: '单选题',
        answer: '',
        A: '',
        B: '',
        C: '',
        D: '',
        E: '',
        F: '',
        //会自动创建选项key
      },
      rules: {
        score: [
          {required: true, message: '请输入题目分数', trigger: 'blur'},
        ],
        show_type: [
          {required: true, message: '请输入题目显示类型', trigger: 'blur'},
        ],
        pattern: [
          {required: true, message: '请选择题目类型', trigger: 'blur'},
        ],
        paper_name: [
          {required: true, message: '请输入题目归属名称', trigger: 'blur'},
        ],
      }
    }
  },
  watch: {
    "$store.state.exam.exam.dan": {
      handler: function (val) {
        this.isEditer = false;
        setTimeout(() => {
          this.defaultHtml = `<div>${val['title']}</div>`;
          this.isEditer = true;
        },0)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {


    delItem: function () {
      if (this.select.length == 2) return this.$message.error("最少留2个");
      this.select.pop();
      this.isPush = true;
      this.$store.commit('exam/setDan', {answer: ''});
    },
    /**
     * 追加题目
     */
    pushItem: function () {
      this.select.length == 5 ? this.isPush = false : this.isPush = true;
      if (this.select.length == 2) {
        this.select.push('C');
      } else if (this.select.length == 3) {
        this.select.push('D');
      } else if (this.select.length == 4) {
        this.select.push('E');
      } else if (this.select.length == 5) {
        this.select.push('F');
      }
    },

    onChange(editor) {
      //使用 editor.getHtml() 获取 HTML 内容。使用 editor.getText() 获取纯文本内容 使用 editor.children 获取 JSON 内容。
      this.latestContent = editor.getHtml()

    },
    onSubmit: function () {

      let _this = this;
      if (this.$store.state.exam.exam.dan.answer == '') {
        this.$message.error('请选择题目的正确答案');
        return;
      }
      if (this.$store.state.exam.exam.dan.score == '') {
        this.$message.error('请选择题目的分数');
        return;
      }
      if (this.$store.state.exam.exam.dan.show_type == '') {
        this.$message.error('请输入题目显示类型');
        return;
      }
      if (this.$md(this.editorId).isEmpty()) {
        this.$message.error('请输入题目');
        return;
      }
      if (this.$store.state.exam.exam.dan.pattern == null) {
        this.$message.error('请选择题目类型');
        return;
      }
      if (this.$store.state.exam.exam.dan.paper_name == '') {
        this.$message.error('请输入题目归属名称');
        return;
      }

      let obj = {
        title: _this.latestContent,
        score: _this.$store.state.exam.exam.dan['score'],
        pattern: _this.$store.state.exam.exam.dan['pattern'],
        paper_name: _this.$store.state.exam.exam.dan['paper_name'],
        show_type: _this.$store.state.exam.exam.dan['show_type'],
        type: _this.$store.state.exam.exam.dan['type'],
        answer: _this.$store.state.exam.exam.dan['answer'],
        lenght: _this.select.length,
        A: _this.$store.state.exam.exam.dan['A'],
        B: _this.$store.state.exam.exam.dan['B'],
        C: _this.$store.state.exam.exam.dan['C'],
        D: _this.$store.state.exam.exam.dan['D'],
        E: _this.$store.state.exam.exam.dan['E'],
        F: _this.$store.state.exam.exam.dan['F'],
      };
      if (this.$store.state.exam.edit.type == 1) {
        if (this.$store.state.exam.readIndex == -1) {//添加
          this.$store.commit('exam/setReadList', obj);
        } else {//修改
          this.$store.commit('exam/setReadList', obj);
          this.$store.commit('exam/setReadIndex', -1);//初始化添加状态
        }
      }
      this.clearDate();
      this.$emit('onSubmit', obj)
    },
    clearDate: function () {
      this.ruleForm.answer = '';
      this.ruleForm.title = '';
      this.ruleForm.pattern = this.$store.state.exam.exam.dan.pattern;
      this.ruleForm.paper_name = this.$store.state.exam.exam.dan.paper_name;
      this.ruleForm.A = '';
      this.ruleForm.B = '';
      this.ruleForm.C = '';
      this.ruleForm.D = '';
      this.ruleForm.E = '';
      this.ruleForm.F = '';
      this.$store.commit('exam/setDan', this.ruleForm);
      this.$md(this.editorId).clear();
    },
    onClose: function () {
      this.$store.commit('exam/setReadIndex', -1);//初始化添加状态
      this.clearDate();
      this.$emit('onClose');

    }

  },
  created() {
    _this = this;
    // _this.defaultHtml = `<div>${this.$store.state.exam.exam.dan['title']}</div>`;
  }

}
</script>

<style lang="scss">

.container {
  min-height: 500px;

  .container-property {
    width: 300px;
    display: flex;
    align-items: center;

    .container-property-time {
      width: 6px;
      height: 20px;
      background-color: #3a8ee6;
    }

    .container-property-text {
      margin-left: 10px;
      font-weight: bold;
      font-size: 18px;
      color: black;
    }
  }

  .container-form {
    margin-top: 10px;
  }

  .container-title {
    z-index: 9999;
    margin-top: 20px;
    margin-left: 50px;
  }

  .container-select {
    display: flex;
    margin-top: 20px;
    align-items: center;

    .container-select-item {
      font-weight: bold;
      font-size: 20px;
    }
  }

  .container-button {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
